function Product() {
    /*属性 行为*/
    this.title = '';
    this.price = '';
    this.id = ''
    this.image = '';
    this.brand = '';
    this.url = '';
}
Product.prototype = {
    bindDom: function () {
        var str = '';
        str += '<dl>'
        str += '<dt><a href="' + this.url + '"><img src="' + this.image + '" width="384" height="225" /></a></dt>';
        str += '<dd>';
        str += '<span><a><em>' + this.brand + '</em>' + this.title + '</a></span>';
        str += '</dd>';
        str += '<dd class="price">';
        str += '<em>￥' + this.price + '</em>';
        str += '<i>售量：' + this.id + '</i>';
        str += '</dd>';
        str += '</dl>';
        return str;
    }
}

/*搭积木开发 -- 代码可读性极高*/
window.onload = function () {
    (function () {
        sendAjax(1, 20)
    })();
    (function () {
        var thisPage = 1;
        var str = '<li>首页</li>'
        for (let i = 1; i <= 10; i++) {
            if (i == 1) {
                str += `<li class="pageItem">${i}</li>`
                continue;
            }
            str += `<li>${i}</li>`
            if (i == 10) {
                str += "<li>末页</li>"
                break;
            }

        }
        $("#pageList").html(str)
        var lists = document.getElementById("pageList").children;
        for (let i = 1; i < lists.length; i++) {
            if(i==11){
                break;
            }
            lists[i].addEventListener("click", function () {
                for (let j = 0; j < lists.length; j++) {
                    lists[j].className = ""
                }
                thisPage = parseInt(this.innerHTML)
                lists[thisPage].className = "pageItem";
                sendAjax(parseInt(this.innerHTML), 20)
            }, true)
            
        }
        lists[0].addEventListener("click", function () {
            for (let j = 0; j < lists.length; j++) {
                lists[j].className = ""
            }
            lists[1].className = "pageItem";
            sendAjax(1, 20)
        })
        lists[11].addEventListener("click", function () {
            console.log(1)
            for (let j = 0; j < lists.length; j++) {
                lists[j].className = ""
            }
            lists[10].className = "pageItem";
            sendAjax(10, 20)
        })

    })();
}


function sendAjax(page, pageSize) {
    $.ajax({
        url: "http://192.168.10.41:8080/apis/book",    //请求的url地址
        dataType: "json",   //返回格式为json\
        data: JSON.stringify({ page, pageSize }),
        async: true,//请求是否异步，默认为异步，这也是ajax重要特性   //参数值,键值对
        type: "post",   //请求方式
        success: function (res) {
            console.log(res)
            var products = res.data;
            var strP = ''
            for (var i = 0, len = products.length; i < len; i++) {
                var product = new Product()
                product.title = products[i].title;
                product.price = products[i].price;
                product.id = products[i].id;
                product.image = products[i].image;
                product.url = products[i].url;
                strP += product.bindDom()
            }
            var container = document.getElementById('container')
            container.innerHTML = strP;
        },
        error: function (err) {
            console.log(err);
        }
    });
}
